<template>
  <el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>发货单管理</span>
			<!-- <el-button style="float: right; padding: 3px 0" type="text" @click="showDispatchListCreateForm=true">新增发货单</el-button> -->
		</div>
		<el-table
			:data="dispatchListListData"
			style="width: 100%">
			<el-table-column label="发货单ID">
				<template slot-scope="scope">
					<i class="el-icon-key"></i>
					<span style="margin-left: 10px">{{ scope.row.dispatchListId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="采购清单ID">
				<template slot-scope="scope">
					<i class="el-icon-tickets"></i>
					<span style="margin-left: 10px">{{ scope.row.purchasingListId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="商品ID">
				<template slot-scope="scope">
					<i class="el-icon-star-on"></i>
					<span style="margin-left: 10px">{{ scope.row.goodsId }}</span>
				</template>
			</el-table-column>
			<el-table-column label="商品数量">
				<template slot-scope="scope">
					<i class="el-icon-star-on"></i>
					<span style="margin-left: 10px">{{ scope.row.goodsNumber }}</span>
				</template>
			</el-table-column>
			<el-table-column label="总金额">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.goodsTotalCost }}元</span>
				</template>
			</el-table-column>
			<el-table-column label="发货地址">
				<template slot-scope="scope">
					<i class="el-icon-star-off"></i>
					<span style="margin-left: 10px">{{ scope.row.address }}</span>
				</template>
			</el-table-column>
			<el-table-column label="确认状态">
				<template slot-scope="scope">
					<span style="margin-left: 10px">
						<el-tag type="info" v-if="scope.row.verified == 0">未确认</el-tag>
						<el-tag type="success" v-if="scope.row.verified == 1">已确认</el-tag>
						</span>
				</template>
			</el-table-column>
			<el-table-column label="发货状态">
				<template slot-scope="scope">
					<span style="margin-left: 10px">
						<el-tag type="info" v-if="scope.row.delivered == 0">未发货</el-tag>
						<el-tag type="success" v-if="scope.row.delivered == 1">已发货</el-tag>
						</span>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
				<el-dropdown>
						<el-button type="primary" size="mini">
							更多操作<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item v-if="scope.row.verified == 1">
								<span @click="getLogisticsInfo(scope.$index, scope.row)">
									<i class="el-icon-info"></i>物流信息
								</span>
							</el-dropdown-item>
							<el-dropdown-item v-if="scope.row.delivered == 0">
								<span @click="deliverGoods(scope.$index, scope.row)">
									<i class="el-icon-info"></i>发货
								</span>
							</el-dropdown-item>
							<el-dropdown-item v-if="scope.row.delivered == 1 && scope.row.verified == 0">
								<span @click="verifyGoods(scope.$index, scope.row)">
									<i class="el-icon-info"></i>确认
								</span>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="prev, pager, next"
			style="padding-top: 15px; text-align: center"
			:page-size="7"
			@current-change="handleCurrentChange"
			:total="dispatchListNumber">
		</el-pagination>
		<!-- 发货单物流信息 -->
		<el-drawer
			size="50vw"
			:visible.sync="showLogisticsInfo"
			direction="rtl">
			<logistice-create-form :dispatchList="dispatchListInfo"/>
		</el-drawer>
	</el-card>
</template>

<script>
	import {dispatchListList, dispatchListUpdate} from '@/api/storage'
import LogisticeCreateForm from './Drawer/LogisticeCreateForm.vue'
	export default {
		name: 'DispatchList',
		data() {
			return {
				//总记录数
				dispatchListNumber: 0,
				// 获取发货单列表分页参数
				dispatchListListParam:{
					startIndex: 0,
					pageSize: 7
				},
				// 发货单列表
				dispatchListListData: [],
				// 显示发货单创建抽屉
				showLogisticsInfo: false,
				// 发货单信息
				dispatchListInfo: {},
			}
		},
		props: [],
		components: {
LogisticeCreateForm
		},
		methods:{
			// 获取物流信息
			getLogisticsInfo(index, row){
				this.dispatchListInfo = row
				this.showLogisticsInfo = true
			},
			// 改变页码
			handleCurrentChange(val) {
				this.dispatchListListParam.startIndex = val - 1
				this.getDispatchListList()
			},
			// 获取发货单列表
			getDispatchListList(){
				dispatchListList(this.dispatchListListParam).then(res => {
					console.log(res.data);
					this.dispatchListListData = res.data.dispatchList
					console.log(this.dispatchListListData);
					this.dispatchListNumber = res.data.total
				})
			},
			// 获取发货单信息
			getdispatchListInfo(index, row){
				dispatchListSearch({dispatchListId: row.dispatchListId}).then(res => {
					this.dispatchListInfo = res.data.dispatchList	
					this.showDispatchListInfoForm = true
				})
			},
			// 发货
			deliverGoods(index, row){
				row.delivered = 1
				dispatchListUpdate(row).then(() => {
					this.getDispatchListList()
				})
			},
			// 确认
			verifyGoods(index, row){
				row.verified = 1
				dispatchListUpdate(row).then(() => {
					this.getDispatchListList()
				})
			},
		},
		computed:{
				//计算属性
		},
		watch:{
				//监听属性
		},
		created() {
			this.getDispatchListList()
		}
	}
</script>

<style scoped>
	.box-card{
		width: 100%;
		height: 100%;
		overflow: auto;
	}
</style>